<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <template>
          <el-row type="flex" justify="end">
              <el-col style="margin-bottom: 10px;" :span="2">
                <el-button type="success" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
              </el-col>
            </el-row>
        </template>
         <!-- 筛选表单 -->
         <el-form :model="choiceForm" ref="choiceForm" class="font">
            <el-row>
              <el-col :span="6">
                <el-form-item label-position="right" label-width="100px" prop="subjectID" label="学科">
                  <el-select size="small" v-model="choiceForm.subjectID" @change="changeSubject">
                    <el-option
                      v-for=" ( item, index ) in subjectsList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <elFormItem label="二级目录" label-position="right" label-width="100px" prop="catalogID" >
                  <el-select size="small" v-model="choiceForm.catalogID">
                    <el-option
                      v-for="item in dirsimpleList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </elFormItem>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" prop="tags" label-position="right" label-width="100px" >
                  <el-select v-model="choiceForm.tags" size="small">
                    <el-option
                      v-for="item in tagsList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" prop="keyword" label-position="right" label-width="100px" >
                  <el-input size="small" v-model="choiceForm.keyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型" prop="questionType" label-position="right" label-width="100px" >
                  <el-select placeholder="请输入" v-model="choiceForm.questionType" size="small">
                    <el-option
                      v-for="item in this.questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" prop="difficulty" label-position="right" label-width="100px" >
                  <el-select v-model="choiceForm.difficulty" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" prop="direction" label-position="right" label-width="100px" >
                  <el-select v-model="choiceForm.direction" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.directionList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" prop="creator" label-position="right" label-width="100px" >
                  <el-select v-model="choiceForm.creator" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.creatorList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="end">
              <el-col :span="6">
                <el-form-item label="题目备注" prop="remarks" label-position="right" label-width="100px" >
                  <el-input v-model="choiceForm.remarks" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="enterprise" label-position="right" label-width="100px" >
                  <el-input v-model="choiceForm.enterprise" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市" label-position="right" prop="city" label-width="100px" >
                  <el-select @change="changeCity" v-model="choiceForm.city" placeholder="请选择" size="small" style="width: 48%; margin-right: 2%">
                    <el-option
                      v-for="item in cityList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  <el-select placeholder="请选择" v-model="choiceForm.area" size="small" style="width: 50%">
                    <el-option
                      v-for="item in areaList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-position="right" label-width="100px" class="updataLabel">
                  <el-button @click="clearData">清除</el-button>
                  <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <el-row>
          <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="全部" name="first"></el-tab-pane>
              <el-tab-pane label="待审核" name="second"></el-tab-pane>
              <el-tab-pane label="已审核" name="third"></el-tab-pane>
              <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
            </el-tabs>
          </template>
        </el-row>
        <!-- 数据记录 -->
        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 表格 -->
        <el-table border :data="choiceList" style="width: 100%">
          <el-table-column align="center" label="试题编号" prop="number" width="120">
          </el-table-column>
          <el-table-column align="center" label="学科" prop="subject" width="120">
          </el-table-column>
          <el-table-column align="center" label="目录" prop="catalog" width="120">
          </el-table-column>
          <el-table-column align="center" label="题型" prop="questionType" width="120">
            <template #default="{row}">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干" prop="question" width="260">
            <template #default="{row}">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间" prop="addDate" width="180">
            <template #default={row}>
            {{$moment(row.addDate).format("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度" prop="difficulty" width="80">
            <template #default="{row}">
              <span v-if="row.difficulty === '1'">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人" prop="creator" width="120">
          </el-table-column>
          <el-table-column align="center" label="审核状态" prop="chkState" width="120">
            <template #default="{row}">
              <span v-if="row.chkState === 0">待审核</span>
              <span v-else-if="row.chkState === 1">已通过</span>
              <span v-else>拒绝</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核意见" prop="chkRemarks" width="150">
          </el-table-column>
          <el-table-column align="center" label="审核人" prop="chkUser" width="120">
          </el-table-column>
          <el-table-column align="center" label="发布状态" prop="chkState" width="150">
            <template #default="{row}">
              <span v-if="row.chkState === 0 || row.chkState === 2">待发布</span>
              <span v-else-if="row.chkState === 1 && row.publishState === 0">下架</span>
              <span v-else-if="row.chkState === 1 && row.publishState === 1">发布</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="previewClick(row.id)">预览</el-button>
              <el-button type="text" size="small" @click="updelModify(row.id)" :disabled="row.chkState !== 0">审核</el-button>
              <el-button type="text" size="small"
              @click="$router.push(`/questions/new?id=${row.id}`)"
              :disabled="row.publishState === 1">修改</el-button>
              <el-button type="text" size="small"
              @click="choicePublishBtn(row)"
              >{{row.publishState === 0 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small"
              @click="delQuestionsChoice(row.id)"
              :disabled="row.publishState === 1"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
         <!-- 分页 -->
         <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="Number(choiceForm.page)"
              :total="total"
              :page-size="Number(choiceForm.pagesize)"
              layout=" prev, pager, next,sizes, jumper">
            </el-pagination>
          </div>
        </div>
        <!-- end -->
      </el-card>
    </div>
    <!-- 审核弹层 -->
    <QuestionsCheck
    :showDialogs.sync="showDialogs"
    :auditOpinionsId="auditOpinionsId"
     @refrech="getCreateList"
     ></QuestionsCheck>
    <!-- 题目预览弹层 -->
    <questions-preview
    ref="previewList"
    :showDialog.sync="showDialog"
    :currentId="auditOpinionsId"
    ></questions-preview>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
import { simple as SubjectsList } from '@/api/hmmm/subjects'
import { simple as dirsimple } from '@/api/hmmm/directorys'
import { simple as tagsList } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { list as creatorList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import QuestionsCheck from '../components/questions-check'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: {
    QuestionsCheck,
    QuestionsPreview
  },
  data () {
    return {
      activeName: 'first',
      showDialog: false,
      showDialogs: false,
      auditOpinionsId: null,
      total: 100,
      currentPage: 1,
      pagesize: 5,
      page: '',
      choiceList: [], // 精选题库列表数据
      subjectsList: {}, // 学科列表数据
      dirsimpleList: [], // 二级目录
      tagsList: [], // 标签列表
      questionTypeList: questionType, // 题型
      difficultyList: difficulty, // 难度
      directionList: direction, // 方向
      creatorList: [], // 录入人
      cityList: [], // 市列表
      areaList: [], // 区列表
      // 查询表单中的参数
      choiceForm: {
        currentPage: 1,
        pagesize: '',
        page: '',
        subjectID: null, // 学科
        catalogID: '', // 目录
        tags: '', // 试题标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creator: '', // 录入人
        remarks: '', // 题目备注
        enterprise: null, // 企业
        city: '', // 城市
        area: '' // 区
      }
    }
  },
  created () {
    this.getCreateList() // 获取精选题库列表数据
    this.getSubjectsList() // 获取学科列表
    this.getCreatorList() // 录入人
    this.getCityList() // 获取市列表
  },
  computed: {
    cResultTip () {
      return `共 ${this.total} 条记录`
    }
  },
  methods: {
    // 点击预览
    async previewClick (id) {
      // console.log(id)
      this.showDialog = true
      this.auditOpinionsId = id
      this.$nextTick(() => {
        this.$refs.previewList.getDetail()
      })
    },
    // 审核
    updelModify (id) {
      this.auditOpinionsId = id
      this.showDialogs = true
    },
    // 上架下架
    choicePublishBtn (row) {
      if (row.publishState === 0) {
        this.choiceList.publishState = 1
        this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({
            id: row.id,
            publishState: this.choiceList.publishState,
            ...this.choiceForm
          })
          this.getCreateList()
          this.$message.success('上架成功!')
        })
      } else {
        this.$confirm('您确认下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({
            id: row.id,
            publishState: this.choiceList.publishState,
            ...this.choiceForm
          })
          this.getCreateList()
          this.$message.success('下架成功!')
        })
        this.choiceList.publishState = 0
      }
    },
    // 删除
    async delQuestionsChoice (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log({ id: id })
        await remove({ id: id })
        this.$message.success('删除成功')
        this.getCreateList()
      })
    },
    // 搜索
    search () {
      // 防抖处理: 降低模糊搜索的请求的频次
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 将页码重置为第一页
        this.choiceForm.page = 1
        this.getCreateList()
      }, 300)
    },
    // 清除数据
    clearData () {
      this.$refs.choiceForm.resetFields()
      this.dirsimpleList = []
      this.tagsList = []
      this.choiceForm.city = ''
      this.choiceForm.area = ''
    },
    // 切换市
    changeCity (city) {
      this.$refs.choiceForm.area = ''
      this.choiceForm.area = ''
      this.getAreaList(city)
    },
    // 获取区列表
    async getAreaList (pname) {
      this.areaList = await citys(pname)
    },
    // 获取市列表
    async getCityList () {
      this.cityList = await provinces()
    },
    // 切换学科
    changeSubject () {
      this.choiceForm.catalogID = ''
      this.choiceForm.tags = ''
      this.getsubjectsSimpleList()
      this.getTags()
    },
    // 获取标签
    async getTags () {
      const { data } = await tagsList({ subjectID: this.choiceForm.subjectID })
      this.tagsList = data
    },
    // 获取二级联动列表
    async getsubjectsSimpleList () {
      const { data } = await dirsimple(this.choiceForm.subjectID)
      this.dirsimpleList = data
    },
    // 获取学科列表
    async getSubjectsList () {
      const { data } = await SubjectsList()
      this.subjectsList = data
    },
    // 获取精选题库列表数据
    async getCreateList () {
      const { data } = await choice(this.choiceForm)
      // console.log(data)
      this.choiceList = data.items
      this.total = data.counts
      this.choiceForm.page = data.page
      this.choiceForm.pagesize = data.pagesize
    },
    // 更改每页显示的条数
    hSizeChange (val) {
      this.choiceForm.pagesize = val
      if (this.choiceForm.page === 1) {
        this.getCreateList()
      }
    },
    // 点击某一个页码
    hCurrentChange (curPage) {
      this.choiceForm.page = curPage
      this.getCreateList()
    },
    // 获取录入人
    async getCreatorList () {
      const { data } = await creatorList()
      // console.log('录入人', res)
      this.creatorList = data.list
    },
    // 筛选状态列表
    async changeClick (num) {
      console.log(123)
      this.choiceForm.page = 1
      const { data } = await choice({ page: this.choiceForm.page, pagesize: this.choiceForm.pagesize, chkState: num })
      // console.log(data)
      this.choiceList = data.items
      this.total = data.counts
    },
    handleClick (tab, event) {
      if (tab.name === 'fourth') {
        this.changeClick(2)
      } else if (tab.name === 'third') {
        this.changeClick(1)
      } else if (tab.name === 'second') {
        this.changeClick(0)
      } else {
        this.getCreateList()
      }
    }
  }
}
</script>

<style scoped>
.updataLabel {
  display: flex;
  justify-content: end;
  margin-right: 23px;
}
.font {
  font-size: 20px;
}
.pages {
  display: flex;
  justify-content: end;
}
.pagination {
  margin-top: 10px;
}
.alert {
  margin: 10px 0;
}
</style>
